import React, { Component } from 'react'
import { PageHeader, Badge, Button } from 'antd'
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout';
import { TableCustomize, BasicPagination, compareNum, openSuccessModal, openModalMessage } from '../../../components/TableCustomize'
import * as APIService from '../../../axios/api_yq'
export default class Examinehave extends Component {
    state = {
        dataSource: [
        ],
        paging: {},
        selectedRowKeys: [],
        selectedRows: [],
        some: null,
        loading: true,
    };
    // 挂载前
    UNSAFE_componentWillMount() {
        this.fetch();
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    //初始化加载数据
    fetch = (page = 1, size = 100) => {
        this.setState({
            // 操作后清除选中
            selectedRowKeys: [],
            selectedRows: [],
            some: null,
            paging: { pageNum: page, pageSize: size }
        })
        let a = { pageNum: page, pageSize: size }
        setTimeout(() => {
            this.search(a)
        }, 300);
    }
    // 查询接口
    search = (data) => {
        let id = JSON.parse(sessionStorage.getItem('examineHave')).id
        console.log({ id: id, ...data });
        APIService.checkFormItem({ id: id, ...data }).then((item) => {
            console.log('查询数据', item);
            if (item.data.code === 200) {
                this.setState({
                    loading: false,
                    dataSource: item.data.data.data,
                    // 操作后清除选中
                    selectedRowKeys: [],
                    selectedRows: [],
                    some: null,
                    paging: {
                        pageNum: item.data.data.pageNum,
                        pageSize: item.data.data.pageSize,
                        total: item.data.data.total,
                    }
                })
            } else {
                openModalMessage('error', item.data.msg)
            }
        })
    }

    // 单条解绑
    deleteRow2 = (data) => {
        const { paging } = this.state
        let id = JSON.parse(sessionStorage.getItem('examineHave')).id
        let a = { id: id, list: [data] }
        console.log(a);
        APIService.unbound(a).then((item) => {
            // console.log(item);
            if (item.data.code === 200) {
                openSuccessModal('解绑成功')
                this.search(paging)
            } else {
                openModalMessage('error', item.data.msg)
            }
        })
    }
    // 选中解绑
    batchs2 = () => {
        const { selectedRows, some, paging } = this.state
        let id = JSON.parse(sessionStorage.getItem('examineHave')).id
        let data = selectedRows
        let a = { id: id, list: data }
        console.log('这是传入的数据', a);
        if (some > 0 && some !== null) {
            APIService.unbound(a).then((item) => {
                // console.log(item);
                if (item.data.code === 200) {
                    openSuccessModal('选中绑定成功')
                    this.search(paging)
                } else {
                    openModalMessage('error', item.data.msg)
                }
            })
        } else {
            openModalMessage('error', '请选中要绑定数据')
        }

    }
    render() {
        const { selectedRowKeys, loading, dataSource, paging } = this.state
        const rowSelection = {
            columnWidth: 60,
            type: 'checkbox',
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                let some = [...selectedRows].length
                this.setState({
                    some: some,
                    selectedRows: selectedRows,
                    selectedRowKeys: selectedRowKeys
                }, () => {
                    console.log('选中个数', this.state.some, '选中详细数据', this.state.selectedRows);
                })
            },
        }
        const columns = [
            {
                title: '序号',
                dataIndex: 'number',
                width: 50,
                align: 'center',
                fixed: 'left',
                render: (text, record, index) =>
                    <div>
                        {index + 1}
                    </div>
            },
            {
                title: '检验编码',
                dataIndex: 'checkItemCode',
                width: 100,
            },

            {
                title: '检验名称',
                width: 100,
                dataIndex: 'checkItemName',
            },
            {
                title: '所属表单',
                width: 100,
                dataIndex: 'formProperties',
            },
            {
                title: '第一类机型',
                width: 100,
                dataIndex: 'checkTypeFirst',
            },
            {
                title: '第二类分类',
                width: 100,
                dataIndex: 'checkTypeSecond',
            },
            {
                title: '排序层级',
                width: 100,
                dataIndex: 'sort',
                sorter: (a, b) => compareNum(a.sort, b.sort),
            },
            {
                title: '检验属性',
                width: 100,
                dataIndex: 'checkItemProperty',
                render: (text, record) =>
                    <div>
                        {
                            record.checkItemProperty === 1 ? <span>范围</span> : record.checkItemProperty === 2 ? <span>文本</span> : record.checkItemProperty === 3 ? <span>唯一值</span> : record.checkItemProperty === 4 ? <span>复选</span> : null
                        }
                    </div>
            },
            {
                title: '检验范围最小值',
                width: 120,
                dataIndex: 'checkStandardMin',
            },
            {
                title: '检验范围最大值',
                width: 120,
                dataIndex: 'checkStandardMax',
            },
            {
                title: '是否包含最小值',
                width: 120,
                dataIndex: 'containMin',
                render: (text, record) =>
                    <div>
                        {
                            record.containMin === 1 ? '包含' : '不包含'
                        }
                    </div>
            },
            {
                title: '是否包含最大值',
                width: 120,
                dataIndex: 'containMax',
                render: (text, record) =>
                    <div>
                        {
                            record.containMax === 1 ? '包含' : '不包含'
                        }
                    </div>
            },
            {
                title: '单位',
                width: 80,
                dataIndex: 'unit',
            },
            {
                title: '检验文本',
                width: 100,
                dataIndex: 'checkStandardText',
            },
            {
                title: '检验选项1',
                width: 100,
                dataIndex: 'checkStandardOption1',
            },
            {
                title: '检验选项2',
                width: 100,
                dataIndex: 'checkStandardOption2',
            },
            {
                title: '检验选项3',
                width: 100,
                dataIndex: 'checkStandardOption3',
            },
            {
                title: '检验选项4',
                width: 100,
                dataIndex: 'checkStandardOption4',
            },
            {
                title: '检验选项5',
                width: 100,
                dataIndex: 'checkStandardOption5',
            },

            {
                title: '备注文本',
                width: 100,
                dataIndex: 'remark',
            },
            {
                title: '操作',
                dataIndex: 'opts',
                fixed: 'right',
                width: 100,
                render:
                    (text, record) =>
                        <a onClick={this.deleteRow2.bind(this, record)}>{'解绑'}</a>

            },
            {
                dataIndex: ''
            }
        ]
        return (
            <div>
                <BasicLayoutSearch>
                    <PageHeader
                        style={{ padding: '4px 24px' }}
                        onBack={() => window.history.back()}
                        title={'质检表单'}>
                    </PageHeader>
                </BasicLayoutSearch>
                <BasicLayout
                    name="绑定数据"
                    icon="table"
                    buttons={[
                        <Button key={1} onClick={this.batchs2} type='primary' icon='close'>{'选中解绑'}</Button>,
                    ]}
                >
                    <TableCustomize
                        id={'billDetails'}
                        rowSelection={rowSelection}
                        columns={columns}
                        rowKey={(record) => record.id}
                        dataSource={dataSource}
                        pagination={false}
                        loading={loading}
                        allowDrafting={true}
                        allowEditable={this.loadData}
                        scroll={{ x: true, y: 600 }}
                        rowClassName={(record, index) => {
                            return (['editable-row', index % 2 === 0 ? 'editable-row' : 'editable-row12'])
                        }}
                    />
                    <BasicPagination pageNum={paging.pageNum} pageSize={paging.pageSize} total={paging.total} loadData={this.fetch} />
                </BasicLayout>
            </div>
        )
    }
}
